<template>
  <div class="content">
    <SearchForm
      class="selectGroup"
      :search-form="searchForm"
      :search-data="searchData"
      :searchHandle="searchHandle"
      :no-border="'border:none'"
    />
    <Table
      :table-data="tableData"
      :row-header="rowHeader"
      :table-option="tableOption"
      @handleButton="handleButton"
      :page-obj="pageObj"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      element-loading-text="拼命加载中..."
      element-loading-background="rgba(0, 0, 0, 0.1)"
    />
    <Dialog :dialogVisible.sync="dialogVisible" @close='dialogVisible = false' />
  </div>
</template>
<script>
import Dialog from './dialog.vue'
import SearchForm from '@/components/searchForm/index.vue'
import Table from '@/components/Table/index.vue'
export default {
  name: 'detail',
  components: {
    Table,
    SearchForm,
    Dialog
  },
  data() {
    return {
      dialogVisible: false,
      dialogType: 'new',
      tableData: [
        {
          id: 0,
          title: '任务123',
          project: '项目1',
          charge: '张三',
          projectDesc: 'xxx页面xxx功能',
          type: '任务',
          creatTime: '3小时前',
          state: '已完成',
          planTime: '2121.12.21',
          operate: '操作'
        },
        {
          id: '1',
          title: '任务456',
          project: '测试',
          projectDesc: '页面样式调整xxxx',
          charge: '李四',
          type: '任务',
          creatTime: '三天前',
          state: '未完成',
          planTime: '2021.11.23',
          operate: '操作'
        }
      ],
      rowHeader: [
        {
          label: '标题',
          width: '25px',
          prop: 'title',
          render: (params, index) => {
            return (
              index + 1 + (this.pageObj.currentPage - 1) * this.pageObj.size
            )
          }
        },
        {
          prop: 'project',
          label: '项目'
        },
        {
          prop: 'projectDesc',
          label: '任务描述'
        },
        {
          prop: 'charge',
          label: '负责人'
        },
        {
          prop: 'type',
          label: '类型'
        },
        {
          prop: 'state',
          label: '状态'
        },
        {
          prop: 'creatTime',
          label: '创建时间'
        },
        {
          prop: 'planTime',
          label: '计划时间'
        }
      ],
      tableOption: {
        label: '操作',
        width: '320',
        options: [
          {
            type: 'text',
            methods: 'edit',
            label: '编辑任务状态'
          },
          {
            type: 'text',
            methods: 'delete',
            label: '删除'
          }
        ]
      },
      pageObj: {
        total: 0,
        size: 10,
        sizes: [10, 30, 50, 100],
        currentPage: 1
      },
      searchData: {
        searchByProject: '',
        searchByMange: '',
        searchByState: ''
      },
      searchForm: [
        {
          type: 'Select',
          label: '项目:',
          options: [
            {
              value: '选择1',
              label: '天工华云'
            },
            {
              value: '选择2',
              label: '朝阳管委'
            },
            {
              value: '选择3',
              label: '巴拉巴拉'
            }
          ],
          prop: 'searchByProject',
          clearable: true,
          clear: () => {},
          change: (val) => {
          }
        },
        {
          type: 'Select',
          label: '负责人:',
          options: [
            {
              value: '选项1',
              label: '豆豆1'
            },
            {
              value: '选项2',
              label: '豆豆2'
            },
            {
              value: '选项3',
              label: '豆豆3'
            },
            {
              value: '选项4',
              label: '豆豆4'
            }
          ],
          prop: 'searchByMange',
          clearable: true,
          clear: () => {},
          change: (val) => {
          }
        },
        {
          type: 'Select',
          label: '状态:',
          options: [
            {
              value: '选项1',
              label: '进行中'
            },
            {
              value: '选项2',
              label: '已完成'
            },
            {
              value: '选项3',
              label: '已验收'
            },
            {
              value: '选项4',
              label: '已拒绝'
            }
          ],
          prop: 'searchByState',
          clearable: true,
          clear: () => {},
          change: (val) => {
          }
        }
      ],
      searchHandle: [
        {
          type: 'primary',
          label: '查询',
          handle: (item) => {
            console.log('++', this.searchData)
          }
        },
        {
          type: 'info',
          label: '清空',
          handle: (lable) => {
            var arr = Object.values(this.searchData)
            arr.length = 0
            this.searchData = { ...arr }
          }
        },
        {
          type: 'info',
          label: '新建任务',
          handle: () => {
            this.dialogVisible = true
          }
        }
      ]
    }
  },
  methods: {
    handleCurrentChange() {},
    handleSizeChange() {},
    handleButton(methods, data, row, index) {
      if (methods === 'delete') {
        this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'btn-custom-cancel',
          type: 'warning'
        }).then (() => {
          console.log('delete', row)
        })
      } else if (methods === 'edit') {
        console.log('编辑')
        this.$router.push({
          name: 'detail',
          params: {
            id: row.id,
            type: 'edit'
          }
        })
      } else if (methods === 'newTask') {
        this.dialogVisible = true
      }
    }
  },
  mounted() {
    console.log(this.$route.params.id)
  }
}
</script>
<style scoped>
.content{
  height: 100%;
  width: 100%;
}
.selectGroup{
  display: flex;
  align-items: center;
  height: 106px;
}
</style>
